<template>
  <div class="model-menu">
    <div class="model-menu-title">3D模型库</div>
    <div class="model-menu-items">
      <div
        v-for="model in modelsList"
        :key="model.id"
        class="model-menu-item"
        @click="createESGltfModel(model)"
      >
        <div class="model-item-img">
          <img
            :src="model.imgUrl || getDefaultImageUrl()"
            :alt="model.name"
            class="menu-thumbnail"
          />
        </div>
        <!--  :title="model.name"  -->
        <div class="menu-item-text">{{ model.name }}</div>
      </div>
    </div>

    <div class="model-menu-button">
      <button class="menu-button" @click="clearRecently">撤销</button>
      <button class="menu-button" @click="clearAll">清除全部模型</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { modelsList } from '@/models-list.js' // 导入自动生成的3D模型列表
import { getobjm } from '@/utils/getobjm.js' // 导入场景对象管理器工具
import { ESGltfModel } from 'earthsdk3' // 导入Earth SDK的GLTF模型类
import { useTreeStore } from '@/stores/treeStore.js'
import { useModelStore } from '@/stores/modelStore.js'
const modelStore = useModelStore() // 绘制状态管理
const treeStore = useTreeStore()
const objm = getobjm() // 获取场景对象管理器实例
/**
 * 获取默认图片URL
 * 当模型没有对应图片时使用此函数返回的默认图片
 */
//glb 模型没有图片，使用此函数返回的默认图片
const getDefaultImageUrl = () => {
  return new URL('@/assets/images/sidebar/modelLibrary/image_404.png', import.meta.url).href
}
// 定义emit，用于通知父组件关闭子菜单
const emit = defineEmits(['close-submenu'])
/**
 * 创建并加载3D模型到场景
 */
const createESGltfModel = (model) => {
  try {
    // 创建GLTF模型场景对象
    const sceneObjectESGltfModel = objm.createSceneObject(ESGltfModel)

    if (!sceneObjectESGltfModel) return // 如果创建失败则退出
    // 设置模型URL
    sceneObjectESGltfModel.url = model.url
    // 启用编辑模式，允许用户调整模型位置和属性
    sceneObjectESGltfModel.editing = true
    sceneObjectESGltfModel.editingChanged.disposableWeakOn(() => {
      if (sceneObjectESGltfModel && sceneObjectESGltfModel.editing === false) {
        const position = sceneObjectESGltfModel.position
        const a = position[0] === 0 && position[1] === 0
        const json = sceneObjectESGltfModel.json
        objm.destroySceneObject(sceneObjectESGltfModel)
        setTimeout(() => {
          if (!a) {
            // modelStore.createModelData.push(sceneObjectESGltfModel)
            const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
            modelStore.createModelData.push(addTree)
            if (addTree) treeStore.treeChange()
          }
        }, 300)
      }
    })
    // 将创建的模型添加到绘制存储中，用于管理和追踪
    // plottingStore.createPlottingData.push(sceneObjectESGltfModel)
  } catch (error) {
    console.error('创建模型时出错:', error)
  }
  emit('close-submenu')
}

/**
 * 组件挂载时执行的初始化逻辑
 * 检查模型列表是否正确加载
 */
onMounted(() => {
  if (!modelsList || modelsList.length === 0) {
    console.warn('模型列表为空，请确保已正确生成 models-list.js 文件')
  } else {
    console.log(`已加载 ${modelsList.length} 个模型`)
  }
})

//撤回最近创建模型
const clearRecently = () => {
  if (modelStore.hasCreateModelData) {
    const recently = modelStore.createModelData.pop()
    treeStore.destroySceneObjectTreeItem(recently)
    treeStore.treeChange()
  }
}
//清除全部模型
const clearAll = () => {
  if (!modelStore.hasCreateModelData) return
  modelStore.createModelData.forEach((item) => {
    if (item) treeStore.destroySceneObjectTreeItem(item)
  })
  treeStore.treeChange()
  modelStore.createModelData = []
}
</script>

<style lang="scss" scoped>
.model-menu {
  width: 15.625vw /* 300px -> 15.625vw */;
  background-color: rgba(0, 8, 26, 0.8);
  border-radius: 0.4167vw /* 8px -> .4167vw */;
  box-shadow: 0 0 0.5208vw /* 10px -> .5208vw */ rgba(0, 195, 255, 0.5);
  border: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.6);
  padding: 0.5208vw /* 10px -> .5208vw */;
  z-index: 2;
  .model-menu-title {
    font-size: 0.8333vw /* 16px -> .8333vw */;
    color: #00c3ff;
    font-weight: bold;
    padding-bottom: 0.5208vw /* 10px -> .5208vw */;
    border-bottom: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.3);
  }

  .model-menu-items {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.7813vw /* 15px -> .7813vw */;
    padding: 0.5208vw /* 10px -> .5208vw */ 0;
    flex-wrap: wrap;
    max-height: 10.4167vw /* 200px -> 10.4167vw */;
    overflow: auto;
    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 0.4167vw /* 8px -> .4167vw */; // 滚动条宽度
    }

    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.3); // 滚动条轨道背景
      border-radius: 0.2083vw /* 4px -> .2083vw */; // 轨道圆角
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 195, 255, 0.5); // 滚动条滑块颜色
      border-radius: 0.2083vw /* 4px -> .2083vw */; // 滑块圆角
    }
    .model-menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5208vw /* 10px -> .5208vw */;
      width: 4.1667vw /* 80px -> 4.1667vw */;
      height: 4.1667vw /* 80px -> 4.1667vw */;
      cursor: pointer;
      border-radius: 0.2083vw /* 4px -> .2083vw */;
      &:hover {
        background-color: rgba(0, 195, 255, 0.2);
        .model-item-img {
          img {
            scale: 0.8;
          }
        }
      }
      .model-item-img {
        img {
          width: 3.125vw /* 60px -> 3.125vw */;
          object-fit: contain;
          transition: all 0.5s;
        }
      }
      .menu-item-text {
        width: 3.6458vw /* 70px -> 3.6458vw */;
        height: 0.8333vw /* 16px -> .8333vw */;
        line-height: 0.8333vw /* 16px -> .8333vw */;
        font-size: 0.625vw /* 12px -> .625vw */;
        color: #ffffff;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .model-menu-button {
    padding-top: 0.5208vw /* 10px -> .5208vw */;
    border-top: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .menu-button {
      background-color: rgba(0, 195, 255, 0.2);
      border: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.6);
      color: #00c3ff;
      padding: 0.2604vw /* 5px -> .2604vw */ 0.4167vw /* 8px -> .4167vw */;
      border-radius: 0.2083vw /* 4px -> .2083vw */;
      font-size: 12px;
      cursor: pointer;
      &:hover {
        background-color: rgba(0, 195, 255, 0.4);
      }
    }
  }
}
</style>
